<template>
	<view class="container">
		<view class="tops">
			<u-tabs :list="list" activeStyle='color:#3d58ed' lineColor='#3d58ed' lineWidth='60' lineHeight='6' @click="click"></u-tabs>
		</view>
		<view class="orderList">
			<view class="orderBar" v-for="item in orderList" :key="item.id">
				<view class="top disb aic">
					<view class="left disp aic">
						<image :src="item.productImg" mode=""></image>
						<text>{{item.productName}}</text>
					</view>
					<view class="fz10 color9 fz-size">申请时间：{{getTime(item.createTime)}}</view>
				</view>
				<view class="step">
					<view class="step-image disa aic">
						<image :src="item.flowN>=1?imguser+'/minis/order/wanshanziliao-on.png':imguser+'/minis/order/wanshanziliao.png'" mode=""></image>
						<view class="colorb">---</view>
						<image :src="item.flowN>=2?imguser+'/minis/order/xiafangedu-on.png':imguser+'/minis/order/xiafangedu.png'" mode=""></image>
						<view class="colorb">---</view>
						<image :src="item.flowN>=3?imguser+'/minis/order/shenqingdaikuan-on.png':imguser+'/minis/order/shenqingdaikuan.png'" mode=""></image>
						<view class="colorb">---</view>
						<image :src="item.flowN>=4?imguser+'/minis/order/yewuyuan-on.png':imguser+'/minis/order/yewuyuan.png'" mode=""></image>
						<view class="colorb">---</view>
						<image :src="item.flowN>=5?imguser+'/minis/order/quanzheng-on.png':imguser+'/minis/order/quanzheng.png'" mode=""></image>
					</view>
					<view class="disb colorb fz12">
						<text></text>
						<text>咨询</text>
						<text>提交</text>
						<text>业务员处理</text>
						<text>权证处理</text>
					</view>
					<view class="toSee disb">
						<view class=""></view>
						<view class="colorf tac fz12 fw" @click="toDetail(item.id)">查看流程</view>
					</view>
				</view>
				<view class="message fz14">
					<view class="messBar disb aic">
						<text class="color10">资产流动性测算：</text>
						<text class="order-f-style">￥{{item.amount?item.amount:'暂未下放'}}</text>
					</view>
					<view class="messBar disb aic">
						<text class="color10">申请时间：</text>
						<text class="order-f-style">{{getTime(item.createTime)}}</text>
					</view>
					<view class="messBar disb aic">
						<text class="color10">资料审核结果：</text>
						<text :class="item.applyState?'fw':'color fw'">{{getStatus(item.applyState)}}</text>
					</view>
					<view class="messBar disb aic" v-if="item.applyState">
						<text class="color10">实际资产流动性测算：</text>
            <span style="float: right">
              <u-text  mode="price" :text="item.practicalAmount" size="17" color="#D34200" bold="true"></u-text>
            </span>

					</view>
					<view class="messBar disb aic" v-if="!item.applyState">
						<text class="color10">实际资产流动性测算：</text>
						<text class="fw color">测算失败</text>
					</view>
					<view class="defult fz12" v-if="!item.applyState">
						<text class="color10">失败原因：</text>
						<text>{{item.resList[0].causeOfFailure}}</text>
					</view>
					<view class="messBar disb aic" v-if="item.applyState">
						<text class="color10">实际执行时间：</text>
						<text class="order-f-style">{{item.practicalTime?getTime(item.practicalTime):'暂无'}}</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getMyOrder} from "../../api/order.js"
	import config from '@/common/config'
export default {
	data() {
		return {
			status:1,
			imguser:config.baseImgUrl,
			list: [{
				name: '申请中'
			}, {
				name: '已完成'
			}],
			orderList:[]
		}
	},
	onLoad() {
		this.getList()
	},
	methods:{
		//获取我的申请的订单
		getList(){
			getMyOrder({status:this.status}).then(res => {
				this.orderList = res.data
			})
		},
		click(item) {
			this.status = item.index + 1
			this.getList()
		},
		toDetail(id){
			uni.navigateTo({
				url:`/pages/order/detail?id=${id}`
			})
		},
		getStatus(i){
			if(i==0){
				return '失败'
			}
			if(i==1){
				return '待跟进'
			}
			if(i==2){
				return '跟进中'
			}
      if(i==3){
        return '已完成'
      }
		},
		//时间戳转换
		getTime(time){
			let data= new Date(time);
			let year = data.getFullYear();
			let month = data.getMonth() + 1;
			let day = data.getDate();
			let h = data.getHours();
			let mm = data.getMinutes();
			let s = data.getSeconds();
			month = month >= 10 ? month : "0" + month;
			day = day >= 10 ? day : "0" + day;
			h = h >= 10 ? h : "0" + h;
			mm = mm >= 10 ? mm : "0" + mm;
			s = s >= 10 ? s : "0" + s;
			return `${year}-${month}-${day} ${h}:${mm}:${s}`;
		},
	}
}
</script>

<style lang="scss">

.order-f-style{
  color: #101010;
}

.container{
	padding: 20rpx;
	.tops{
		padding: 20rpx;
		.data-v-48634e29{
			text-align: center;
			flex: 1;
		}
	}
}

.orderList{
	.orderBar{
		padding: 20rpx;
		margin: 20rpx 0;
		border-radius: 10rpx;
		box-shadow: 0 0 20rpx #ccc;
		.top{
			padding: 20rpx 0rpx;
			border-bottom: 1rpx solid #ccc;
			.left{
				image{
					width: 80rpx;
					height: 80rpx;
					margin-right: 20rpx;
				}
			}
		}
		.step{
			border-bottom: 1rpx solid #ccc;
			.step-image{
				padding: 20rpx 0;
				image{
					width: 60rpx;
					height: 60rpx;
				}
			}
			.toSee{
				padding: 20rpx 0;
				.colorf{
					width: 150rpx;
					line-height: 50rpx;
					border-radius: 30rpx;
					color: #333;
					border: 1rpx solid #333;
				}
			}
		}
		.message{
			.messBar{
				padding: 20rpx 0;
			}
			.defult{
				padding: 10rpx 20rpx;
				line-height: 40rpx;
				background-color: #ccc;
			}
		}

    .fz-size{
      font-size: 12px;
    }

	}
}
</style>
